<template>
  <div>
    <table border="1">
      <caption>
        欢迎光临_vue开发的收银系统_水果店
      </caption>
      <thead>
        <tr>
          <th>苹果10$/斤,折扣&lt;8折&gt;</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>输入你要购买的斤数<input type="number" v-model="count" /></td>
        </tr>
        <tr>
          <td>
            <button @click="close" :disabled="count <= 0">结账买单</button>
          </td>
        </tr>
        <tr>
          <td>结账单:总结{{ total }}元折后价:{{ price }}元 省了{{ save }}元</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: "",
      price: "",
      save: "",
      count: 1,
    };
  },
  methods: {
    close() {
      this.total = 10 * this.count;
      this.price = 8 * this.count;
      this.save = this.total - this.price;
    },
  },
};
</script>

<style>
table {
  width: 500px;
}
tbody {
  text-align: center;
}
</style>